<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span> 考勤列表
      </p>
      <div id="nav_go1">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert()">返回</el-button>
      </div>
    </div>

    <!-- 头部 --end-->
    <div class="import">
      <!-- <div class="import_buttom" @mouseover="enter()" @mouseleave="out()">
        <img v-show="img" src="@/assets/images/KaoQinLieBiao/u29198.png" alt />
        <img v-show="img1" src="@/assets/images/KaoQinLieBiao/u29198_mouseOver.png" alt />
        <p>考勤表导入</p>
        <input
          type="file"
          @change="importf(this)"
          accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
        />
      </div>-->
      <div class="import_buttom" @mouseover="enter()" @mouseleave="out()" @click="daoru()">
        <img v-show="img" src="@/assets/images/KaoQinLieBiao/u29198.png" alt />
        <img v-show="img1" src="@/assets/images/KaoQinLieBiao/u29198_mouseOver.png" alt />
        <p>考勤表导入</p>
      </div>
      <!-- 筛选 --start-->
      <div class="search_container">
        <hy-search
          ref="query"
          class="search_box"
          :searchTitle="searchTitle"
          v-model="searcher"
          :col="6"
          @search="getkaoqinlist(0)"
        ></hy-search>
      </div>
      <!-- 筛选 --end-->
    </div>

    <div id="container">
      <template>
        <el-table :data="tableData" style="width: 100%" height="631" stripe>
          <el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
          <el-table-column prop="YearInt" label="考勤月年份" align="center">
            <template slot-scope="scope">{{scope.row.YearInt}}年</template>
          </el-table-column>
          <el-table-column prop="MonthInt" label="考勤月份" align="center">
            <template slot-scope="scope">{{scope.row.MonthInt}}月</template>
          </el-table-column>
          <el-table-column prop="createOnStr" label="提交时间" align="center"></el-table-column>
          <el-table-column prop="subname" label="提交人" align="center"></el-table-column>
          <el-table-column prop="depart" label="部门" align="center"></el-table-column>
          <!-- <el-table-column prop="state" label="状态" align="center"></el-table-column> -->
          <el-table-column label="操作" align="center">
            <el-row slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.state=='未核对'"
                @click="checkAttendance(date=scope.row.date,depart=scope.row.depart,true)"
              >核对</el-button>
              <el-button
                size="mini"
                type="primary"
                @click="checkAttendancexq(date=scope.row.id)"
              >详情</el-button>
            </el-row>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="block">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page.sync="current"
        :page-size="pagesize"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 驳回弹框 -->
    <el-dialog title="导入" :append-to-body="true" :visible.sync="dialogVisibles" width="40%">
      <div class="color_box"></div>
      <div class="con">
        <div class="block" style="margin:5px;">
          <!-- <span class="demonstration">年</span> -->
          <el-date-picker
            v-model="year"
            type="year"
            value-format="yyyy"
            format="yyyy"
            placeholder="选择年"
            width="40%"
          ></el-date-picker>
        </div>
        <div class="block" style="margin:5px;">
          <!-- <span class="demonstration">月</span> -->
          <el-date-picker
            v-model="month"
            type="month"
            value-format="MM"
            format="MM"
            placeholder="选择月"
            width="40%"
          ></el-date-picker>
        </div>
      </div>
      <div class="con">
        <div class="block" style="margin:5px;">
          <!-- <span class="demonstration">年</span> -->
          <el-select  width="40%" v-model="depart" placeholder="请选择部门" @change="changeDepart">
            <el-option
              v-for="item in departList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="block" style="margin:5px;">
          <!-- <span class="demonstration">月</span> -->
          <el-select v-model="name" placeholder="选择提交人">
            <el-option
              v-for="item in nameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="display:flex;text-align: center;">
        <el-upload
          class="upload-demo"
          action="/apis/PersonnelMatters.asmx/UpFile"
          :on-change="handleChange"
          :on-preview="handlePreview"
          :on-success="function (res, file) { return handleSuccess1(res, file)}"
          :on-remove="function(res,file){ return handleRemove(res,file)}"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :data="item"
        >
          <el-button size="small" type="primary">确定</el-button>
        </el-upload>
        <!-- <el-button size="small" type="primary" @click="caozuo(2)">确定</el-button> -->
        <el-button size="small" type="info" @click="dialogVisibles = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data () {
    return {
      item: null,
      depart: "",
      year: "",
      month: "",
      name: "",
      creater: 0,
      departList: [],
      nameList: [],
      fileList: [],
      dialogVisibles: false,
      total: 1,
      current: 1,
      pagesize: 11,
      img: true,
      img1: false,
      bumeng: "",
      searchTitle: [
        {
          type: "input",
          name: "customProductName",
          label: "输入搜索",
          placeholder: "请输入部门",
          prop: "customProductName"
        },
        {
          type: "date2",
          name: "issuanceDate",
          label: "输入时间",
          placeholder: "请选择输入时间",
          prop: "issuanceDate"
        }
      ],
      searcher: {
        customProductName: "",
        customProductNo: "",
        issuanceDate: ""
      },
      tableData: [],
      xlsvalue: [],
    };
  },
  created () {
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    this.getDepartList();
    this.getkaoqinlist(0);
    return
    let data1 = localStorage.getItem("enterpristList");
    this.empno = JSON.parse(data1).empno;
    console.log(this.empno);
  },
  methods: {
    beforeUpload (file) {
      if (this.depart == "") { this.$message.error("请选择部门"); return; }
      if (this.name == "") { this.$message.error("请选择提交人"); return; }
      if (this.year == "") { this.$message.error("请选择年份"); return; }
      if (this.month == "") { this.$message.error("请选择月份"); return; }
      this.item = { depart: this.depart, name: this.name, year: this.year, month: this.month, creater: this.creater };
      let promise = new Promise((resolve) => {
        this.$nextTick(function () {
          resolve(true);
        });
      });
      return promise; //通过返回一个promis对象解决
    },
    handleSuccess1 (response, file) {
      var datas = this.$x2js.xml2js(response);
      var list = JSON.parse(datas.string.__text);
      this.year = ""; this.name = ""; this.month = ""; this.depart = ""; this.fileList = [];
      if (list.success) { this.$message.success("上传成功");this.dialogVisibles=false; this.getkaoqinlist(this.current-1); router.go(-1); }
      else { this.$message.error(list.errorMess); router.go(0); }
    },
    S4 () { return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); },
    guid () { return this.S4() + this.S4() + this.S4() + this.S4(); },
    handleRemove (res, file) {
      let filelist = this.newfileList;
      for (let ind = 0; ind < filelist.length; ind++) {
        const element = filelist[ind];
        if (element.uid == res.uid) { filelist.splice(ind, 1); }
      }
      this.newfileList = filelist;
      console.log(this.newfileList)
    },
    handleChange (file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    handlePreview (file) {
      console.log(file);
    },
    //获取部门
    getDepartList () {
      var obj = { id: 4 };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ComApi.asmx/GetData?index=1&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.departList = list;
      });
    },
    changeDepart (e) {
      if (e != 0) {
        this.name = ""; this.nameList = [];
        let obj = { departCode: e };
        var objs = JSON.stringify(obj);
        let the = { index: 8, jsondata: objs }
        axios.post("/apis/PersonnelMatters.asmx/GetData", the).then(({ data }) => {
          var list = eval('(' + data.d + ')');
          this.nameList = list;
        });
      }
    },
    daoru () { console.log(2222); this.dialogVisibles = true; },
    //导入xls数据
    importf (obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
      this.file = event.currentTarget.files[0];
      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;
      const isLt20M = this.file.size / 1024 / 1024 < 1;
      if (!isLt20M) {
        this.$message.error("上传表格的大小不能超过1M!");
      } else {
        var reader = new FileReader(); //if (!FileReader.prototype.readAsBinaryString) {
        FileReader.prototype.readAsBinaryString = function (f) {
          var binary = "";
          var rABS = false; //是否将文件读取为二进制字符串
          var pt = this;
          var wb; //读取完成的数据
          var outdata;
          var reader = new FileReader();
          reader.onload = function (e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i]);
            }
            var XLSX = require("xlsx");
            if (rABS) {
              wb = XLSX.read(btoa(fixdata(binary)), {
                //手动转化
                type: "base64"
              });
            } else {
              wb = XLSX.read(binary, {
                type: "binary"
              });
            } // outdata就是你想要的东西 excel导入的数据
            const sheet2JSONOpts = {
              /** Default value for null/undefined values */
              defval: ''//给defval赋值为空的字符串
            }
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], sheet2JSONOpts); // excel 数据再处理
            // let importList = _this.dateTransition(outdata);
            let arr = [];
            outdata.map(v => {
              let obj = {};
              console.log(outdata)
              obj.name = v.姓名;
              obj.H_1A = v.H_1A;
              obj.H_1B = v.H_1B;
              obj.H_2A = v.H_2A;
              obj.H_2B = v.H_2B;
              obj.H_3B = v.H_3B;
              obj.H_3A = v.H_3A;
              obj.H_4A = v.H_4A;
              obj.H_4B = v.H_4B;
              obj.H_5A = v.H_5A;
              obj.H_5B = v.H_5B;
              obj.H_6A = v.H_6A;
              obj.H_6B = v.H_6B;
              obj.H_7A = v.H_7A;
              obj.H_7B = v.H_7B;
              obj.H_8A = v.H_8A;
              obj.H_8B = v.H_8B;
              obj.H_9A = v.H_9A;
              obj.H_9B = v.H_9B;
              obj.H_10A = v.H_10A;
              obj.H_10B = v.H_10B;
              obj.H_11A = v.H_11A;
              obj.H_11B = v.H_11B;
              obj.H_12A = v.H_12A;
              obj.H_12B = v.H_12B;
              obj.H_13A = v.H_13A;
              obj.H_13B = v.H_13B;
              obj.H_14A = v.H_14A;
              obj.H_14B = v.H_14B;
              obj.H_15A = v.H_15A;
              obj.H_15B = v.H_15B;
              obj.H_16A = v.H_16A;
              obj.H_16B = v.H_16B;
              obj.H_17A = v.H_17A;
              obj.H_17B = v.H_17B;
              obj.H_18A = v.H_18A;
              obj.H_18B = v.H_18B;
              obj.H_19A = v.H_19A;
              obj.H_19B = v.H_19B;
              obj.H_20A = v.H_20A;
              obj.H_20B = v.H_20B;
              obj.H_21A = v.H_21A;
              obj.H_21B = v.H_21B;
              obj.H_22A = v.H_22A;
              obj.H_22B = v.H_22B;
              obj.H_23A = v.H_23A;
              obj.H_23B = v.H_23B;
              obj.H_24A = v.H_24A;
              obj.H_24B = v.H_24B;
              obj.H_25A = v.H_25A;
              obj.H_25B = v.H_25B;
              obj.H_26A = v.H_26A;
              obj.H_26B = v.H_26B;
              obj.H_27A = v.H_27A;
              obj.H_27B = v.H_27B;
              obj.H_28A = v.H_28A;
              obj.H_28B = v.H_28B;
              obj.H_29A = v.H_29A;
              obj.H_29B = v.H_29B;
              obj.H_30A = v.H_30A;
              obj.H_30B = v.H_30B;
              obj.H_31A = v.H_31A;
              obj.H_31B = v.H_31B;
              obj.chuqin = v.出勤;
              obj.gongchai = v.公差;
              obj.gongjia = v.公假;
              obj.shijia = v.事假;
              obj.gongshangjia = v.工伤假;
              obj.binjia = v.病假;
              obj.hunjia = v.婚假;
              obj.fenmianjia = v.分娩假;
              obj.sangjia = v.丧假;
              obj.teshujia = v.特殊假;
              obj.tanqinjia = v.探亲假;
              obj.late = v.迟到;
              obj.addwork = v.加班;
              obj.remark = v.备注;
              obj.depart = v.部门;
              obj.yeardate = v.工资表时间;
              obj.submitter = v.提交人;
              arr.push(obj);
            });

            // console.log(arr);
            _this.accountList = [...arr];
            _this.xlsvalue = _this.accountList;
            _this.addxlsvalue();
          };

          reader.readAsArrayBuffer(f);
        };
        if (rABS) {
          reader.readAsArrayBuffer(f);
        } else {
          reader.readAsBinaryString(f);
        }
      }
    },
    //返回
    revert () {
      this.$router.go(-1);
    },
    //鼠标滑入
    enter () {
      (this.img = false), (this.img1 = true);
    },
    //鼠标滑出
    out () {
      (this.img = true), (this.img1 = false);
    },
    //核对
    checkAttendance (date, depart, state) {
      this.$router.push({
        path: "/AttendanceSheetXq",
        query: { state: state, date: date, depart: depart }
      });
    },
    //详情
    checkAttendancexq (e) {
      this.$router.push({
        path: "/AttendanceSheetXq",
        query: { e: e }
      });
    },
    // 分页
    handleCurrentChange (e) {
      this.getkaoqinlist(e - 1);
    },
    //考勤表列表数据
    getkaoqinlist (page) {
      let start = ""; let end = "";
      if (this.searcher.issuanceDate != null && this.searcher.issuanceDate != "") { start = this.searcher.issuanceDate[0]; end = this.searcher.issuanceDate[1]; }
      let obj = {
        key: this.searcher.customProductName ? this.searcher.customProductName : "",
        start: start,
        end: end,
        pn: page,
        PerPageSize: this.pagesize
      };
      var objs = JSON.stringify(obj);
      let the = { index: 12, jsondata: objs }
      axios.post("/apis/PersonnelMatters.asmx/GetData", the).then(({ data }) => {
        var list = eval('(' + data.d + ')');
        this.total = list.count;
        this.tableData = list.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';
.con {
  display: flex;
}
.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go1 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}
.upload-demo{margin: 0 10px;}
.import {
  width: 98%;
  height: 80px;
  background: $white;
  position: relative;
  margin: 0 auto;
  .import_buttom {
    border: solid 1px $Personnel;
    height: 60px;
    width: 150px;
    border-radius: 5px;
    color: $Personnel;
    z-index: 999;
    cursor: pointer;
    display: flex;
    position: absolute;
    right: 1%;
    top: 10px;
    img {
      height: 40px;
      margin: 10px auto;
    }
    p {
      width: 60%;
      line-height: 60px;
      font-weight: bold;
      margin: 0 auto;
    }
    input {
      height: 60px;
      width: 150px;
      cursor: pointer;
      position: absolute;
      left: 0;
      opacity: 0; //透明度
    }
  }
  .import_buttom:hover {
    background: $Personnel;
    color: $white;
  }
  .search_container {
    background: $white;
    height: 50px;
    margin-top: 10px;
    width: 98%;
    padding: 0 1%;
    position: absolute;
    .search_box {
      width: 98%;
      padding-top: 5px;
    }
  }
}
#container {
  background: $white;
  width: 98%;
  margin: 10px auto;
  table tr {
    border-top: 1px solid #ebeef5;
    border-bottom: 1px solid #ebeef5;
    text-align: center;
    height: 53px;
    background: $white;
  }
  table tr th {
    text-align: center;
    color: #909399;
    font-size: 14px;
    width: 14%;
  }
  table tr th select {
    height: 30px;
  }

  /////////////////
  table tbody {
    display: block;
    height: 300px;
    overflow-y: scroll;
  }

  table thead,
  tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    color: #606266;
    font-size: 14px;
  }
  tr:nth-child(even) {
    background-color: #fafafa;
  }
  table thead {
    width: calc(100% - 1em);
  }

  ///////////////////
}
.block {
  margin-top: 10px;

  text-align: center;
}
</style>
<style>
#container .el-select .el-input__inner {
  width: 100%;
  border: none;
  outline: none;
  text-align: center;
}
</style>
